import { createApp } from 'vue'
import App from './App.vue'
import router from './route'
import store, { key } from './store'
// 初始化css
import 'normalize.css/normalize.css'
// element-plus
// import installElementPlus, { Size } from './plugins/element'
import { Size } from './plugins/element'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 挂载到vue实例上
import { ElMessageBox, ElMessage, ElNotification } from 'element-plus'
// 全局 css
import '@/styles/index.scss'
// svg icons
import initSvgIcon from '@/icons/index'

const app = createApp(App)
// 获取store里存储的size
const size = store.state.app.size
console.log('main.ts------------')
app
  .use(store, key)
  .use(router)
  .use(ElementPlus, {
    size
  })
  .use(initSvgIcon)
  .mount('#app')

// Vue.prototype 替换为 config.globalProperties
// 文档说明 https://v3.cn.vuejs.org/guide/migration/global-api.html#vue-prototype-%E6%9B%BF%E6%8D%A2%E4%B8%BA-config-globalproperties
app.config.globalProperties.$message = ElMessage;
app.config.globalProperties.$notify = ElNotification;
app.config.globalProperties.$confirm = ElMessageBox.confirm;
app.config.globalProperties.$alert = ElMessageBox.alert;
app.config.globalProperties.$prompt = ElMessageBox.prompt;
/**
 * 相关issue问题
 * Why not on the d.ts use it ?
   (为什么不能在shims-d.ts 中设置这个？
 * https://github.com/vuejs/vue-next/pull/982
 */
// 挂载到vue实例上
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $message: typeof ElMessage;
    $notify: typeof ElNotification;
    $confirm: typeof ElMessageBox.confirm;
    $alert: typeof ElMessageBox.alert;
    $prompt: typeof ElMessageBox.prompt;
    $ELEMENT: {
      size: Size;
    };
  }
}
